<template>
    <div class="evaluation-container">
        <!-- 头部标题 - 固定在顶部 -->
        <div class="page-header">
            <div class="header-content">
                <h2 class="header-title">需求上线评价</h2>
                <p class="header-subtitle">请对已完成的需求进行评分和反馈</p>
            </div>
            <div class="header-decoration"></div>
        </div>

        <!-- 需求列表 -->
        <div class="requirement-list" v-loading="loading" style="padding-top: 100px;">
            <div v-for="(item, index) in allRequirements" :key="index" class="requirement-card">
                <div class="card-header" @click="handleRowClick(item.id)">
                    <span class="index">{{ index + 1 }}</span>
                    <h3 class="title">{{ item.requirementName }}</h3>
                    <el-icon class="arrow">
                        <ArrowRight />
                    </el-icon>
                </div>

                <div class="card-content">
                    <div class="info-row">
                        <span class="label">项目经理:</span>
                        <span class="value">{{ item.RequirementManagerName }}</span>
                    </div>
                    <div class="info-row">
                        <span class="label">技术负责人:</span>
                        <span class="value">{{ item.requirementBossName }}</span>
                    </div>
                </div>

                <div class="card-footer">
                    <el-button type="primary" size="small" round @click="handleRowEvaluate(item)"
                        :disabled="item.itemRequirementChilds.length == 0">
                        <el-icon class="icon">
                            <Edit />
                        </el-icon>
                        <span>评价</span>
                    </el-button>
                </div>
            </div>

            <div v-if="allRequirements.length === 0 && !loading" class="empty-state">
                <el-icon class="empty-icon">
                    <Document />
                </el-icon>
                <p>暂无待评价需求</p>
            </div>
        </div>

        <!-- 全屏评价弹窗 -->
        <el-dialog v-model="dialogEvaluateVisible" title="需求评价" :close-on-click-modal="false"
            @close="handleCloseEvaluateDialog" fullscreen class="fullscreen-dialog">
            <el-scrollbar class="dialog-scrollbar">
                <div class="dialog-content">
                    <div class="slider-container">
                        <el-form ref="managerRequirementRef" :model="managerRequirementForm"
                            :rules="managerRequirementRules" label-position="top">
                            <!-- 技术负责人评价 -->
                            <div class="evaluation-section">
                                <h3 class="section-title">
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                    <span>技术负责人评价</span>
                                </h3>

                                <el-form-item label="任务分配评分 (1-100分)" prop="mToBAvgNumber" class="form-item">
                                    <el-slider v-model="managerRequirementForm.mToBAvgNumber" :min="1" :max="100"
                                        :step="1" show-input input-size="small" />
                                    <div class="form-tip">评价技术负责人在任务分配中的表现</div>
                                </el-form-item>

                                <el-form-item label="综合表现评分 (1-100分)" prop="mToDevBossNumber" class="form-item">
                                    <el-slider v-model="managerRequirementForm.mToDevBossNumber" :min="1" :max="100"
                                        :step="1" show-input input-size="small" />
                                    <div class="form-tip">评价技术负责人的整体表现</div>
                                </el-form-item>

                                <el-form-item label="评价意见" prop="mToDevBossTip" class="form-item">
                                    <el-input type="textarea" :rows="3" placeholder="请输入对技术负责人的评价意见"
                                        v-model="managerRequirementForm.mToDevBossTip" resize="none" />
                                </el-form-item>
                            </div>

                            <!-- 研发人员评价 -->
                            <div v-for="(dev, idx) in managerRequirementForm.devs" :key="idx"
                                class="evaluation-section">
                                <h3 class="section-title">
                                    <el-icon>
                                        <Avatar />
                                    </el-icon>
                                    <span>{{ dev.userName }} 评价</span>
                                </h3>

                                <el-form-item :label="`工作表现评分 (1-100分)`"
                                    :prop="'managerRequirementForm.' + idx + '.mToDevNumber'" class="form-item">
                                    <el-slider v-model="dev.mToDevNumber" :min="1" :max="100" :step="1" show-input
                                        input-size="small" />
                                    <div class="form-tip">评价研发人员的工作表现</div>
                                </el-form-item>

                                <el-form-item :label="`评价意见`" :prop="'managerRequirementForm.' + idx + '.mToDevTip'"
                                    class="form-item">
                                    <el-input type="textarea" :rows="3" :placeholder="`请输入对${dev.userName}的评价意见`"
                                        v-model="dev.mToDevTip" resize="none" />
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </div>
            </el-scrollbar>

            <div class="dialog-footer">
                <el-button @click="handleCloseEvaluateDialog" round>取消</el-button>
                <el-button type="primary" @click="handleSubmitEvaluate(managerRequirementRef)" round>
                    提交评价
                </el-button>
            </div>
        </el-dialog>

        <!-- 需求详情弹窗 -->
        <el-dialog v-model="dialogInfoVisible" title="需求详情" :close-on-click-modal="false" width="90%" top="5vh"
            class="detail-dialog">
            <el-scrollbar>
                <CommonRequirementInfoVue :isRequirementID="isRequirementID" :clearData="clearData" :isComment="true" />
            </el-scrollbar>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ArrowRight, Edit, Document, User, Avatar } from '@element-plus/icons-vue'
import { GetManagerNoToDevRequirements, SaveManagerNoToDevRequirements } from "@/api/newDemands/index";
import { ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import CommonRequirementInfoVue from "@/components/requirement/comomRequirementInfo.vue";
import { validateInput } from "@/utils/utils";

const loading = ref(false);
const isRequirementID = ref<any>(null);
const dialogInfoVisible = ref(false);
const clearData = ref(false);
const dialogEvaluateVisible = ref(false);
const allRequirements = ref<any>([]);
const managerRequirementRef = ref<FormInstance>();

// 评分规则
const managerRequirementRules = {
    mToDevBossNumber: [{ required: true, message: '请评分', trigger: 'blur' }],
    mToDevBossTip: [{ required: true, message: '请输入评价', trigger: 'blur', validator: validateInput }],
    mToBAvgNumber: [{ required: true, message: '请评分', trigger: 'blur' }],
};

const managerRequirementForm = ref<any>({
    id: null,
    mToDevBossNumber: 0,
    mToDevBossTip: "",
    mToBAvgNumber: 0,
    devs: [{
        itemRequirementChildId: null,
        mToDevNumber: 0,
        mToDevTip: "",
        userName: "",
        userUUID: "",
    }]
});

// 获取需求列表
const getAllRequirements = async () => {
    loading.value = true;
    try {
        const { data } = await GetManagerNoToDevRequirements();
        if (data.code === 200) {
            allRequirements.value = data.data || [];
        } else {
            ElMessage.error(data.msg);
        }
    } catch (error) {
        console.error(error);
        ElMessage.error("获取数据失败");
    } finally {
        loading.value = false;
    }
};

// 打开评价弹窗
const handleRowEvaluate = async (item: any) => {
    dialogEvaluateVisible.value = true;
    managerRequirementForm.value = {
        id: item.id,
        mToDevBossNumber: 0,
        mToDevBossTip: "",
        mToBAvgNumber: 0,
        devs: item.itemRequirementChilds.map((dev: any) => ({
            itemRequirementChildId: dev.itemRequirementChildId,
            mToDevNumber: dev.mToDevNumber == '' ? 0 : Number(dev.mToDevNumber),
            mToDevTip: dev.mToDevTip || "",
            userName: dev.userName,
            userUUID: dev.userUUID
        }))
    };
};

// 关闭评价弹窗
const handleCloseEvaluateDialog = () => {
    dialogEvaluateVisible.value = false;
    managerRequirementForm.value = {
        id: null,
        mToDevBossNumber: 0,
        mToDevBossTip: "",
        mToBAvgNumber: 0,
        devs: [{
            itemRequirementChildId: null,
            mToDevNumber: 0,
            mToDevTip: "",
            userName: "",
            userUUID: "",
        }]
    };
    managerRequirementRef.value?.resetFields();
};

// 查看需求详情
const handleRowClick = async (id: number) => {
    isRequirementID.value = id;
    dialogInfoVisible.value = true;
};

// 提交评价
const handleSubmitEvaluate = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;

    try {
        await formEl.validate(async (valid) => {
            if (valid) {
                const { data } = await SaveManagerNoToDevRequirements(managerRequirementForm.value);
                if (data.code === 200) {
                    ElMessage.success(data.msg);
                    handleCloseEvaluateDialog();
                    await getAllRequirements();
                } else {
                    ElMessage.error(data.msg);
                }
            }
        });
    } catch (error) {
        console.error(error);
        ElMessage.error("提交评价失败");
    }
};

// 禁用手势缩放
const disableZoom = () => {
    // 添加viewport meta标签防止缩放
    const meta = document.createElement('meta');
    meta.name = 'viewport';
    meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
    document.getElementsByTagName('head')[0].appendChild(meta);

    // 添加触摸事件监听器防止双指缩放
    document.addEventListener('touchstart', function (e) {
        if (e.touches && e.touches.length > 1) {
            e.preventDefault();
        }
    }, { passive: false });

    document.addEventListener('touchmove', function (e) {
        if (e.touches && e.touches.length > 1) {
            e.preventDefault();
        }
    }, { passive: false });

    document.addEventListener('touchend', function (e) {
        if (e.touches && e.touches.length > 1) {
            e.preventDefault();
        }
    }, { passive: false });
};

onMounted(() => {
    getAllRequirements();
    disableZoom(); // 调用禁用缩放函数
});
</script>

<style lang="scss" scoped>
.evaluation-container {
    padding: 0;
    background-color: #f8fafc;
    min-height: 100vh;

    .page-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 15px 16px;
        background: linear-gradient(135deg, #53728c 0%, #7c3aed 100%);
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        .header-content {
            position: relative;
            z-index: 2;
        }

        .header-title {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }

        .header-subtitle {
            margin: 5px 0 0;
            font-size: 14px;
            opacity: 0.9;
        }

        .header-decoration {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 120px;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-28-56c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            background-size: cover;
            opacity: 0.8;
            border-radius: 0 0 0 16px;
        }
    }

    .requirement-list {
        padding: 0 16px;
        padding-top: 100px;
        /* 与头部高度匹配 */
        display: flex;
        flex-direction: column;
        gap: 16px;

        .requirement-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease;

            &:hover {
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            }

            .card-header {
                display: flex;
                align-items: center;
                margin-bottom: 12px;
                cursor: pointer;

                .index {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 24px;
                    height: 24px;
                    background-color: #e0e7ff;
                    color: #4f46e5;
                    border-radius: 6px;
                    font-size: 14px;
                    font-weight: 500;
                    margin-right: 12px;
                }

                .title {
                    flex: 1;
                    margin: 0;
                    font-size: 16px;
                    font-weight: 500;
                    color: #1f2937;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .arrow {
                    margin-left: 8px;
                    color: #9ca3af;
                }
            }

            .card-content {
                margin-bottom: 16px;

                .info-row {
                    display: flex;
                    margin-bottom: 8px;
                    font-size: 14px;

                    .label {
                        color: #6b7280;
                        width: 80px;
                    }

                    .value {
                        color: #374151;
                        font-weight: 500;
                    }
                }
            }

            .card-footer {
                display: flex;
                justify-content: flex-end;

                .el-button {
                    padding: 8px 16px;

                    .icon {
                        margin-right: 4px;
                    }
                }
            }
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 0;
            background: white;
            border-radius: 12px;

            .empty-icon {
                font-size: 48px;
                color: #d1d5db;
                margin-bottom: 16px;
            }

            p {
                margin: 0;
                color: #6b7280;
                font-size: 16px;
            }
        }
    }
}

/* 全屏弹窗样式 */
.fullscreen-dialog {

    // 使用Vue 3推荐的最新样式穿透语法
    &:deep() {
        .el-dialog {
            margin: 0;
            width: 100vw;
            height: 100vh;
            max-width: 100vw;
            max-height: 100vh;
            border-radius: 0;
            overflow: hidden;
            background-color: #fff;

            &__header {
                display: none; // 完全隐藏默认标题
            }

            &__body {
                padding: 0;
                height: calc(100vh - 60px); // 减去底部按钮高度
                display: flex;
                flex-direction: column;
                background-color: #f8fafc;
            }
        }
    }

    // 自定义标题栏样式
    .dialog-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: #fff;
        padding: 12px 16px;
        border-bottom: 1px solid #e4e7ed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

        .dialog-title {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: #303133;
        }

        .close-icon {
            font-size: 20px;
            color: #909399;
            cursor: pointer;
            transition: color 0.2s;

            &:hover {
                color: #409eff;
            }
        }
    }

    // 内容区域滚动条样式
    .dialog-scrollbar {
        flex: 1;
        padding: 16px;
        overflow-y: auto;

        // 确保内容不会超出可视区域
        >* {
            max-width: 100%;
        }
    }

    // 底部操作栏样式
    .dialog-footer {
        position: sticky;
        bottom: 0;
        z-index: 100;
        background: #fff;
        padding: 12px 16px;
        border-top: 1px solid #e4e7ed;
        display: flex;
        justify-content: space-between;
        box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);

        .el-button {
            flex: 1;
            margin: 0 8px;
            height: 36px;
            font-weight: 500;

            // 主按钮样式增强
            &--primary {
                background-color: #409eff;
                border-color: #409eff;

                &:hover {
                    background-color: #66b1ff;
                    border-color: #66b1ff;
                }
            }
        }
    }

    // 评分滑块容器特殊处理
    .slider-container {
        padding: 8px 0;

        &:deep() {
            .el-slider {
                margin: 16px 0;

                &__runway {
                    margin: 12px 0;
                    height: 4px;
                }

                &__bar {
                    height: 4px;
                    background-color: #409eff;
                }

                &__button {
                    width: 16px;
                    height: 16px;
                    border: 2px solid #409eff;
                }

                &__input {
                    width: 100px;
                    margin-left: 16px;

                    .el-input-number__decrease,
                    .el-input-number__increase {
                        display: none;
                    }

                    .el-input__inner {
                        text-align: center;
                    }
                }
            }
        }
    }
}

/* 详情弹窗样式 */
.detail-dialog {
    :deep(.el-dialog__body) {
        padding: 0;
    }
}

.slider-container {
    padding: 0 16px;

    :deep(.el-slider) {
        margin: 16px 0;

        .el-slider__runway {
            margin: 10px 10px 0 10px;
        }

        .el-slider__input {
            width: 100px;
            margin-left: 16px;
        }
    }
}

/* 表单项目样式 */
.evaluation-dialog {
    .dialog-content {
        padding: 0 8px;

        .evaluation-section {
            margin-bottom: 24px;

            .section-title {
                display: flex;
                align-items: center;
                margin: 0 0 16px;
                font-size: 16px;
                color: #1f2937;

                .el-icon {
                    margin-right: 8px;
                    color: #4f46e5;
                }
            }

            .form-item {
                margin-bottom: 20px;

                :deep(.el-form-item__label) {
                    font-weight: 500;
                    color: #4b5563;
                    padding-bottom: 6px;
                }

                .form-tip {
                    font-size: 12px;
                    color: #9ca3af;
                    margin-top: 4px;
                    line-height: 1.4;
                }

                :deep(.el-slider) {
                    margin-top: 10px;
                    .el-slider__input {
                        width: 80px;
                    }
                }
            }
        }
    }

    .dialog-footer {
        display: flex;
        justify-content: space-between;

        .el-button {
            flex: 1;
            margin: 0 8px;
        }
    }
}
</style>